<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form slot="detail" :form="form">
        <a-row>
           <a-col :span="24">
            <a-form-item label="执行时间" :labelCol="{span: 3}" :wrapperCol="{span:19}"  style="margin:0 0 20px -26px">
              <a-range-picker
                :disabled="isShow"
                format="YYYY-MM-DD"
                :placeholder="['开始时间','结束时间']"
                v-decorator="['time',{ rules: [{ required: true, message: '请选择执时间' }] }]"
                style="width:645px"
                @change="datechange"
              >
              </a-range-picker>
            </a-form-item>
           </a-col>
          <a-col :span="11">
            <a-form-item label="任务名称"  :labelCol="{span: 5}" :wrapperCol="{span: 16}">
              <a-input
                :disabled="isShow"
                v-decorator="['taskName',{ rules: [{ required: true, message: '请输入任务名称' }] }]"
                placeholder="请输入任务名称"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="所属果园" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
              <a-input
                :disabled="isShow"
                :maxLength="15"
                v-decorator="['orchardName',{ rules: [{ required: true, message: '请输入所属果园' }] }]"
                placeholder="请输入所属果园"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm" v-if="!isShow">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>
<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import moment from 'moment'
const limitNumber = (value) => {
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(/[^0-9]/g, '') : 0
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(/[^0-9]/g, '') : 0
  } else {
    return 0
  }
}
export default {
  name: 'DpCyTechnicalServiceForm',
  components: {
    JFormContainer
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
       //详情
      isShow: {
        type: Boolean,
        default: false,
        required: false
      }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
      },
      url: {
        add: '/loquat/tqppAgriculturalActivities/add',
        edit: '/loquat/tqppAgriculturalActivities/edit',
        queryById: '/dp/dpFwTechnicalService/queryById'
      },
      limitNumber: limitNumber
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    add() {
      this.edit({})
    },
    datechange(val){
      console.log(val);
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        setTimeout(() => {
          if(record.executionStartTime){
           const time = [moment(record.executionStartTime,'YYYY-MM-DD'),moment(record.executionEndTime,'YYYY-MM-DD')]
           this.form.setFieldsValue({time,time})
          }
           this.form.setFieldsValue(pick(this.model, 'taskName', 'orchardName'))
        });
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        const params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          this.$emit('loading',that.confirmLoading)
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const formData = Object.assign(this.model, values)
          formData.executionStartTime = moment(formData.time[0]).format('YYYY-MM-DD')
          formData.executionEndTime = moment(formData.time[1]).format('YYYY-MM-DD')
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            this.$emit('loading',that.confirmLoading)
          })
        }
      })
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'taskName', 'orchardName', 'executionStartTime','executionEndTime'))
    }
  }
}
</script>
<style lang="less" scoped>
   .group-query-strig{
    text-align: center;
    display: inline-block;
    font-size: 14px;
    margin: 0 10px;
  }
</style>
